const path = require("path");
const Webpack = require("Webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WebpackBar = require('webpackbar')

// 获取本地ip地址
const os = require("os");
const networkInterfaces = os.networkInterfaces();
const ipv4Config = networkInterfaces[Object.keys(networkInterfaces)[0]].find(
  config => {
    return config.family === "IPv4";
  }
);
const ip = ipv4Config ? ipv4Config.address : "0.0.0.0";
const port = 4000

module.exports = {
  // 入口(entry)
  entry: {
    vendor: path.resolve(__dirname, "src/vendor.js"),
    main: path.resolve(__dirname, "src/index.js")
  },
  // 输出(output)
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "[name].js",
    chunkFilename: "[name].chunk.js",
    publicPath: "/"
  },
  // 启用 source map
  devtool: "cheap-module-eval-source-map",
  // webpack-dev-server配置
  devServer: {
    clientLogLevel: "warning",
    hot: true, // 热更新
    contentBase: false, //不启用
    compress: false, //开启gzip
    host: ip,
    port: port,
    open: false, //自动打开浏览器
    overlay: {
      warnings: false,
      errors: true
    },
    publicPath: "/",
    proxy: {},
    quiet: true,
    watchOptions: {
      poll: false
    }
  },
  // loader
  module: {
    rules: [
      // 加载js 使用babel做转化
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [{
          loader: "babel-loader",
          options: {
            sourceMap: true
          }
        }]
      },
      // 加载ts
      {
        test: /\.tsx?$/,
        use: [{
          loader: "ts-loader"
        }]
      },
      // 加载 CSS
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      },
      // 加载less
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "less-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      },
      // 加载scss
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      },
      // 加载sass
      {
        test: /\.sass$/,
        use: [
          MiniCssExtractPlugin.loader,
          {
            loader: "css-loader",
            options: {
              sourceMap: true
            }
          },
          {
            loader: "sass-loader",
            options: {
              sourceMap: true
            }
          }
        ]
      },
      // 加载图片
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ["file-loader"]
      },
      // 加载字体
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ["file-loader"]
      },
      //把jquery变成 $ 暴露到window
      {
        test: require.resolve("jquery"),
        use: "expose-loader?$"
      },
      //把lodash变成 _ 暴露到window
      {
        test: require.resolve("lodash"),
        use: "expose-loader?_"
      }
    ]
  },
  // 插件(plugins)
  plugins: [
    // 热替换模块
    new Webpack.HotModuleReplacementPlugin(),
    // 当开启 HMR 的时候使用该插件会显示模块的相对路径
    new Webpack.NamedModulesPlugin(),
    // 在输出阶段时，遇到编译错误跳过
    new Webpack.NoEmitOnErrorsPlugin(),
    // 进度条插件
    new WebpackBar(),
    // html处理
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, "src/index.html")
    }),
    // css提取
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[name].chunk.css"
    }),
    // 复制引用资源
    new CopyWebpackPlugin([{
      from: path.resolve(__dirname, "static"),
      to: "static",
      ignore: [".*"]
    }])
  ]
};

// module.exports = new Promise((resolve, reject) => {
//       devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({
//         compilationSuccessInfo: {
//           messages: [`Your application is running here: http://${ip}:${port}`],
//         },
//         onErrors: () => {
//           const notifier = require('node-notifier')

//           return (severity, errors) => {
//             if (severity !== 'error') return

//             const error = errors[0]
//             const filename = error.file && error.file.split('!').pop()

//             notifier.notify({
//               title: packageConfig.name,
//               message: severity + ': ' + error.name,
//               subtitle: filename || '',
//               icon: path.join(__dirname, 'logo.png')
//             })
//           }
//         }
//       }))
//       resolve(devWebpackConfig)
// })